<div class="sui-flex-col sui-flex-middle" v-if="options">
	<!-- 最左边文字和水管 -->
	<div class="first-box">
		<div style="position: relative;top: 17%;">
			<template v-if="options.room">
				<p style="line-height: 30px;">瞬时流量: {{options.room.flow}}</p>
				<p style="line-height: 30px;">进水压力: {{options.room.press}}</p>
			</template>
			<p class="water-piple" style="width: 100%;margin-top: 10px;"></p>
			<img src="img/p_3_l.png" style="position: absolute;bottom: -25px;right: -28px;width: 60px;z-index: 1;" />
		</div>
	</div>

	<div style="width: 25%;height: 100%;">
		<!-- 1个水池没做处理 -->
		<template v-if="options.pools && options.pools.length > 1" v-for="(pool,index) in options.pools">
			<div style="position: relative;" :style="getPoolHeight(options.pools)" :class="getMiddlePiple(index,options.pools)">
				<!-- 顶部 -->
				<template v-if="getPoolPosition(index,options.pools) == 'top'">
					<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border:10px #FFFFFF solid;border-bottom: none;border-top-left-radius: 6px; border-top-right-radius: 6px;"></div>
					<img src="img/p_2_dr.png" style="position: absolute;top: 50%;left: -19px;width: 60px;margin-top: -20px;" />
					<img src="img/p_2_ld.png" style="position: absolute;top: 50%;right: -20px;width: 60px;margin-top: -20px;" />
				</template>
				<!-- 中间 -->
				<template v-if="getPoolPosition(index,options.pools) == 'middle'">
					<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border-top:10px #FFFFFF solid;"></div>
					<img src="img/p_3_r.png" style="position: absolute;top: 50%;left: -29px;width: 60px;margin-top: -25px;" />
					<img src="img/p_3_l.png" style="position: absolute;top: 50%;right: -29px;width: 60px;margin-top: -25px;" />
				</template>
				<!-- 底部 -->
				<template v-if="getPoolPosition(index,options.pools) == 'bottom'">
					<div style="position: absolute;top:0px;bottom: 50%;width: 100%;border:10px #FFFFFF solid;border-top: none;border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;"></div>
					<img src="img/p_2_ur.png" style="position: absolute;top: 50%;left: -20px;width: 60px;margin-top: -40px;" />
					<img src="img/p_2_lu.png" style="position: absolute;top: 50%;right: -20px;width: 60px;margin-top: -40px;" />
				</template>
				<!-- 水池图标 -->
				<img src="img/water_ball.png" style="height: 120%;position: relative; margin:auto auto ;" />
				<p style="position: absolute; width: 100%;text-align: center;top:50%;color: #FFFFFF;z-index: 2;">{{pool.precent}}</p>
				<p style="position: absolute;bottom:0%;color: #FFFFFF;z-index: 2;width: 100%;text-align: center;">{{pool.name}}</p>
			</div>
		</template>
	</div>


	<div class="first-box" style="width: 7%;">
		<div style="position: absolute;top: 27%;width: 100%;">
			<p class="water-piple" style="width: 100%;"></p>
			<img src="img/p_3_r.png" style="width: 60px;position: absolute;top: 0;left: -28px; margin-top: -25px;z-index: 1;" />
			<img src="img/p_3_l.png" style="width: 60px;position: absolute;top: 0;right: -28px; margin-top: -25px;z-index: 1;" />
		</div>
	</div>


	<div style="width: 40%;height: 100%;">
		<template v-if="options.pumps && options.pumps.length > 1" v-for="(pump,index) in options.pumps">
			<div style="position: relative;" :style="getPoolHeight(options.pumps)" :class="getMiddlePiple(index,options.pumps)">
				<template v-if="getPoolPosition(index,options.pumps) == 'top'">
					<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border:10px #FFFFFF solid;border-bottom: none;border-top-left-radius: 6px; border-top-right-radius: 6px;"></div>
					<img src="img/p_2_dr.png" style="position: absolute;top: 50%;left: -20px;width: 60px;margin-top: -20px;" />
					<img src="img/p_2_ld.png" style="position: absolute;top: 50%;right: -20px;width: 60px;margin-top: -20px;" />
					<img :src="getPumpImg(pump)" style="position: absolute;left: 10%;top:50%; margin-top: -75px;height: 100px;z-index:2;" />
					<img src="img/press.png" style="position: absolute;left: 45%;top:50%; margin-top: -35px;height: 50px;z-index:2;" />
					<img src="img/dianci.png" style="position: absolute;left: 65%;top:50%; margin-top: -35px;height: 50px;z-index:2;" />
				</template>
				<!-- 中间 -->
				<template v-if="getPoolPosition(index,options.pumps) == 'middle'">
					<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border-top:10px #FFFFFF solid;"></div>
					<img src="img/p_3_r.png" style="position: absolute;top: 50%;left: -28px;width: 60px;margin-top: -25px;" />
					<img src="img/p_3_l.png" style="position: absolute;top: 50%;right: -28px;width: 60px;margin-top: -25px;" />
					<img :src="getPumpImg(pump)" style="position: absolute;left: 10%;top:50%; margin-top: -75px;height: 100px;z-index:2;" />
					<img src="img/press.png" style="position: absolute;left: 45%;top:50%; margin-top: -35px;height: 50px;z-index:2;" />
					<img src="img/dianci.png" style="position: absolute;left: 65%;top:50%; margin-top: -35px;height: 50px;z-index:2;" />
				</template>
				<!-- 底部 -->
				<template v-if="getPoolPosition(index,options.pumps) == 'bottom'">
					<div style="position: absolute;top:0px;bottom: 50%;width: 100%;border:10px #FFFFFF solid;border-top: none;border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;"></div>
					<img src="img/p_2_ur.png" style="position: absolute;bottom: 50%;left: -20px;width: 60px;margin-bottom: -20px;" />
					<img src="img/p_2_lu.png" style="position: absolute;bottom: 50%;right: -20px;width: 60px;margin-bottom: -20px;" />
					<img :src="getPumpImg(pump)" style="position: absolute;left: 10%;bottom:50%; margin-bottom: -15px;height: 100px;z-index:2;" />
					<img src="img/press.png" style="position: absolute;left: 45%;bottom:50%; margin-bottom: -5px;height: 50px;z-index:2;" />
					<img src="img/dianci.png" style="position: absolute;left: 65%;bottom:50%; margin-bottom: -5px;height: 50px;z-index:2;" />


				</template>

				<p style="position: absolute;left: 10%;bottom: 50%; margin-bottom: -40px; color: #FFFFFF;z-index: 2;width: 100px;text-align: center;">{{pump.name}}</p>
				<div style="position: absolute;left: 40%;">
					<p v-show="pump.flow" class="pump-content">瞬时流量: {{pump.flow}}</p>
					<p v-show="pump.press" class="pump-content">出水压力: {{pump.press}}</p>
				</div>

			</div>
		</template>
	</div>

	<div class="first-box" style="width: 7%;">
		<div style="position: absolute;top: 27%;width: 100%;">
			<p class="water-piple" style="width: 100%;"></p>
			<img src="img/p_3_r.png" style="width: 60px;position: absolute;top: 0;left: -28px; margin-top: -25px;z-index: 1;" />
		</div>
	</div>

</div>

<script>
	export = {
		props: {
			options: null
		}, //传递值
		data: function() {
			return {

			}
		},
		mounted: function() {
			console.log("初始化");
			console.log(JSON.stringify(this.options));
		},
		methods: {
			//根据水池数量获得每个水池块的高度
			getPoolHeight: function(object) {
				var height = parseInt(100 / (object.length || 1));
				if (object.length == 2) {
					height = 40;
				}
				return {
					height: height + "%"
				}
			},

			getPoolPosition: function(index, object) {
				var length = object.length || -99;
				var position = "";
				if (length > 0) {
					position = index == 0 ? "top" : index == length - 1 ? "bottom" : index < length - 1 ? "middle" : "";
				}

				console.log("length:" + length + "|index:" + index + "|position:" + position);
				return position;
			},

			getMiddlePiple: function(index, object) {
				return this.getPoolPosition(index, object) == "middle" ? " middle-piple" : "";
			},

			getPumpImg: function(pump) {
				var img = "img/beng_1.png";
				if (pump.state && pump.state == -1) {
					img = "img/beng_3.png"
				}
				if (pump.state && pump.state == 1) {
					img = "img/beng_2.png"
				}
				return img;
			},



		},

	}
</script>

<style>
	.water-piple {
		background-color: #FFFFFF;
		height: 10px;
	}

	.first-box {
		width: 15%;
		position: relative;
		height: 100%;
	}

	.first-box p {
		color: #FFFFFF;
		font-size: 15px;
	}

	.middle-piple {
		border-left: 10px #FFFFFF solid;
		border-right: 10px #FFFFFF solid;
	}


	.pump-content {
		color: #FFFFFF;
		font-size: 13px;
	}
</style>
